<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <p><input type="text" v-model='title' placeholder="请输入"></p>
        <hr>
        <myhead></myhead>
        <hr>
        <parent></parent>
    </div>

    <template id="parent">
        <div>
            <h2>parent - parent -父组件</h2>
            <h2>{{test}}</h2>
            <h2>num==={{num}}</h2>
            <hr>
            <!-- 子组件必须添加到这个盒子里 -->
            <childone :test="test" ref='one'></childone>
            <childtwo @asdasd='changeTest'
            :changedata='changeData'
            
            ></childtwo>
        </div>

    </template>



    <template id="childone">
        <div>
            <h2>parent - parent -子组件==1</h2>
            <button @click='changeonecount'>点击修改childtwo--count</button>
            <button @click='changeTwoWord'>点击修改childtwo中的word</button>
            <h4>test==={{test}}</h4>
            <h2>num==={{num}}</h2>
            <hr>
        </div>

    </template>
    <template id="childtwo">
        <div>
            <h2>parent - parent -子组件==2</h2>
            <h2>count---{{count}}</h2>
            <h2>word --- {{word}}</h2>
            <button @click='changeOneData'>自定义去修改 组件 one</button>
            <button @click='changeOneDataPraent'>$parent去修改 组件 one</button>
            <!-- 这里括号的内容是字符串所以必须加引号！！ -->
            <button @click='changedata("人人都是内卷王")'>反向props去修改 组件 one</button>

            <button @click="changeOneDataNum">$praent 修改组件one中的--(num)}</button>
            <hr>
        </div>
    </template>

    <script>
        let bus = new Vue()//事件中🐏总线  空的vue实例 用于兄弟之间的数据传输



        //创建头部父组件
        Vue.component('myhead', {
            template: '<header>这是头部父组件</header>',
        });
        // 这是父组件parent
        Vue.component('parent', {
            template: '#parent',
            methods: {
                // 父组件接收子组件传过来的函数和值 接收修改、
                changeTest(test) {
                    this.test = test
                },
                changeData(test){
                    this.test=test;
                }
            },
            data() {
                return {
                    test: '卷死所有人',
                    num:2110
                }
            }
        });



        // 这是子组件
        Vue.component('childone', {
            template: '#childone',

            data() {
                return {
                    num: 2110,
                };
            },
            // 父传子 子用props接收
            props: {
                test: String
            },
            methods: {
                changeonecount() {
                    bus.$emit('changeonecount', 18);
                },
                changeTwoWord() {
                    bus.$emit('changeTwoWord', '兄弟组件之间的通信是靠emit发送on接收的')
                }
            },
        });

        // 子组件2
        Vue.component('childtwo', {
            template: '#childtwo',
            props:{
                changedata:Function
            },
            methods: {
                // 发送需求到父组件从而修改组件中的值
                changeOneData() {
                    this.$emit('asdasd', '每天熬夜卷');
                },
                changeOneDataPraent(){
                    // 改变父组件的值子组件也会同时改变
                    this.$parent.test='你还好么？内卷人'
                },
                changeOneDataNum(){
                    this.$parent.$refs.one.num+=1
                }
            },
            mounted() {
                bus.$on('changeonecount', count => {
                    this.count += count
                })
            },
            // 这个情况下mounted的使用和created效果是一样的
            created() {
                bus.$on('changeTwoWord', word => {
                    this.word = word
                })
            },
            data() {
                return {
                    count: 20,
                    word: "兄弟组件真好玩"
                };
            },
        });




        // 创建vue头部
        // 根实例 根组件
        let vm = new Vue({
            data() {
                return {
                    title: "兄弟组件通信",
                    flag: true
                }
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML = this.title
            }
        }).$mount("#app")


    </script>
    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit
        On
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs      
        c. 事件center总线 (bus new Vue)
        d. events 事件 
        e. vuex (最后一天) 

        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  逆向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件center总线   
        e.  vuex   
        
        3.  兄弟组件之间的通信  
        a. 事件center总线 (bus new Vue)=
        b. 中间人模式  (子改父  父改子 )   把父亲当做中间人  
        c. vuex  

        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->

</body>

</html>